{% extends "背景板.html" %}

{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}

{% block main %}
<style>
  /* 样式表 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }

  .manage-button,
  .delete-button {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }

  .manage-button {
    background-color: #00bfff;
  }

  .delete-button {
    background-color: #ffb6c1;
  }

  .buttons {
    display: inline-flex;
  }

  /* 模态框样式 */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  /* 输入框样式 */
  input[type="text"],
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

  input[type="submit"] {
    background-color: #00bfff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #0080ff;
  }

  .product-info {
    font-size: 1.2em;
    margin-bottom: 10px;
  }

  .search-box {
    margin-bottom: 10px;
  }

  .search-box input {
    width: 300px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .search-box button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
<div class="member-info">
    <h1>会员信息</h1>
    <!-- 搜索框 -->
    <div class="search-box">
        <input id="search-text" placeholder="请输入关键字..." type="text">
        <button onclick="searchMembers()">搜索</button>
    </div>
    <!-- 新增会员 -->
    <button onclick="openModal('add-modal')">新增会员</button>
    <!-- 添加会员模态框 -->
    <div class="modal" id="add-modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('add-modal')">×</span>
            <h2>新增会员</h2>
            <form action="{{ url_for('member.add_member') }}" method="POST">
                <label for="mobile">会员电话号码</label>
                <input id="mobile" name="mobile" required type="text">
                <label for="name">会员姓名</label>
                <input id="name" name="name" required type="text">
                <input type="hidden" name="points" value="0">
                <input type="submit" value="保存">
            </form>
        </div>
    </div>
</div>
<!-- 会员列表 -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="flash-message {{ category }}">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}
    <div class="table-container" style="height: 500px; overflow: auto;">
<table>
  <tr>
    <th>会员编号</th>
    <th>会员姓名</th>
    <th>会员手机号</th>
    <th>会员积分</th>
    <th>操作</th>
  </tr>
  {% for member in members %}
  <tr>
    <td>{{ member.id }}</td>
    <td>{{ member.name }}</td>
    <td>{{ member.mobile }}</td>
    <td>{{ member.points }}</td>
    <td>
      <div class="buttons">
        <button class="manage-button" onclick="openModal('manage-modal-{{ member.id }}')">管理</button>
        <button class="delete-button" onclick="openModal('delete-modal-{{ member.id }}')">删除</button>
      </div>
    </td>
  </tr>
  <!-- 管理模态框 -->
  <div class="modal" id="manage-modal-{{ member.id }}">
    <div class="modal-content">
      <span class="close" onclick="closeModal('manage-modal-{{ member.id }}')">×</span>
      <h2>管理会员</h2>
      <form action="{{ url_for('member.manage_member') }}" method="POST">
        <input id="new_member_id" name="member_id" type="hidden" value="{{ member.id }}">
        <label for="new_mobile">会员电话号码</label>
        <input id="new_mobile" name="new_mobile" required type="text" value="{{ member.mobile }}">
        <label for="new_name">会员姓名</label>
        <input id="new_name" name="new_name" required type="text" value="{{ member.name }}">
        <label for="points">当前积分点 {{member.points}}</label>
        <div><label for="points">使用积分点数</label></div>
        <input id="points" name="new_points" required type="text" min="0">
        <div><input type="submit" value="保存"></div>
      </form>
    </div>
  </div>
  <!-- 删除模态框 -->
  <div class="modal" id="delete-modal-{{ member.id }}">
    <div class="modal-content">
      <span class="close" onclick="closeModal('delete-modal-{{ member.id }}')">×</span>
      <h2>确认删除会员</h2>
      <p>你确定要删除 "{{ member.name }}" 吗？</p>
      <form action="{{ url_for('member.delete_member') }}" method="POST">
        <input name="member_id" type="hidden" value="{{ member.id }}">
        <div class="buttons">
          <input type="submit" value="确认删除">
          <button onclick="closeModal('delete-modal-{{ member.id }}')" type="button">取消</button>
        </div>
      </form>
    </div>
  </div>
  {% endfor %}
</table>
    </div>

<script>
  // 显示模态框
  function openModal(modalId) {
    document.getElementById(modalId).style.display = "block";
  }

  // 隐藏模态框
  function closeModal(modalId) {
    document.getElementById(modalId).style.display = "none";
  }
</script>
<script>
    // JavaScript代码
    function openModal(modalId) {
        document.getElementById(modalId).style.display = "block";
    }

    function closeModal(modalId) {
        document.getElementById(modalId).style.display = "none";
    }

    function searchMembers() {
        const searchText = document.getElementById('search-text').value;
        window.location.href = "{{ url_for('member.search_members') }}?search=" + searchText;
    }
</script>
</div>
{% endblock %}